import React, { useState } from 'react';
import { connect } from 'umi';
import { Modal, Tag } from 'antd';
import { Column } from '@ant-design/charts';
import { Tabs, Space } from 'antd';
import { useEffect } from 'react';
const TagSet = (props) => {
  const { id, filterSelect, onSelect, dispatch, selectList } = props;
  const [intentionDirectionList, setintentionDirectionList] = useState([]);
  const fetchintentionDirectionList = () => {
    dispatch({
      type: 'setting/fetchIntentionCourse',
      payload: {},
      callback: (e) => {
        const { intentionCourseList } = e;
        setintentionDirectionList(
          intentionCourseList.map((item) => {
            const { courseName, id } = item;
            return {
              key: courseName,
              value: id,
            };
          }),
        );
      },
    });
  };
  useEffect(() => {
    fetchintentionDirectionList();
  }, []);
  return (
    <Space wrap={true}>
      {intentionDirectionList.map((item, index) => {
        const { value, key } = item;
        return (
          <Tag
            style={
              filterSelect(value)
                ? { fontSize: 14, border: '1px solid #1890ff', color: '#1890ff' }
                : {}
            }
            onClick={() => onSelect(item)}
            key={index}
          >
            {key}
          </Tag>
        );
      })}
    </Space>
  );
};

export default connect(({ user, loading }) => ({
  loading: loading.models.behaviorEecord,
}))(TagSet);
